<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>集市</title>
    <link rel="stylesheet" href="./css/common.css">
    <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
  <script src="./fonts/iconfont.js"></script>
</head>
  <style>
 .icon {
         width: 1em;
        height: 1em;
        vertical-align: -0.15em;
         fill: currentColor;
        overflow: hidden;
        background-color: transparent; /* 确保背景透明 */ 
 
    }
    .icon:active{/* 点击效果 */
        color: green;
    }

   ul{
        padding: 0;
        margin: 0;
        list-style: none;
   }
   ul,p,body{
       padding: 0;
       margin: 0;
   }
   .bnav{
    /* 固定在下面 */
       position: fixed;
       left: 0;
       bottom: 0;
       width: 100%;
       z-index: 9;
       background-color: #ffffff;
       border-top: 0.2vw solid #eee;
   }
   body{
    margin-bottom: 50vw
   }
   .bnav>ul{
    display: flex;
   }
   .bnav li{
    width: 20%;
    display: flex;
    justify-content: center;/* 设置容器属性 */
   }
   .bnav div{
    position: relative;
   }
   .bnav svg{
     font-size: 5vw;
     margin: 3px 0;
   }
   .bnav p{
    font-size: 14px;
    margin: 3px 0; 
    text-align: center;
    color: #746d6d;
   }
   .bnav p:active{
    color: green;
   }
   
     #S img{
      width: 100%;
      position: fixed;
      left:0vw;
    }
    .box1{
      position: relative;
      width: 25vw;
      height: 7vw;
      left: 6vw; 
      top: 15vw;
      border:2px solid #eee;
      border-radius: 5vw;
      font-size: 3vw;
    }
    .box1 img{
      width: 26%;
      position: relative;
      left: 1vw;
      top: -4vw;
    }
    .box1 p{
      position: relative;
      left: 10vw;
      top: 1vw;
    }

    .box2{
      position: relative;
      width: 25vw;
      height: 7vw;
      left: 39vw; 
      top: 7vw;
      border:2px solid #eee;
      border-radius: 5vw;
      font-size: 3vw;
    }
    .box2 img{
      width: 26%;
      position: relative;
      left: 1vw;
      top: -4vw;
    }
    .box2 p{
      position: relative;
      left: 10vw;
      top: 1vw;
    }

    .box3{
      position: relative;
      width: 25vw;
      height: 7vw;
      left: 70vw; 
      top: -1vw;
      border:2px solid #eee;
      border-radius: 5vw;
      font-size: 3vw;
    }
    .box3 img{
      width: 26%;
      position: relative;
      left: 1vw;
      top: -4vw;
    }
    .box3 p{
      position: relative;
      left: 10vw;
      top: 1vw;
    }
    .T img{
      position: relative;
      left: 0vw;
      width: 100%;
      top: 4vw;
    }
    .s2{
            height: 33px;
            font-size: 16px;
            color: #000;
            text-align: center;
            overflow: hidden;
    }
    .T-1 img{
      width: 7%;
      border-radius: 50%;
      position: relative;
      left: 5vw;
    }
    h2{
      font-size: 4vw;
      position: relative;
      left: 18vw;
      top: -6vw;
    }
    .s2{
      position: relative;
      top: 10vw;
      left: 8vw;
      font-size: 3vw;
      color: rgb(146, 142, 142);;
    }
    h5{
      font-size: 3vw;
      position: relative;
      top: -12vw;
      left: 88vw;
    }
    .s3{
      position: relative;
      top: -7vw;
      left: 2vw;
    }
    .s3 img{
      width: 100%;
    }
  </style>

<body>
   <header id="S">
    <img src="./images/集市.jpg" >
   </header>
   <div class="box1">
    <p><strong>豆瓣良品</strong></p>
    <img src="./images/豆瓣豆品.jpg">
   </div>
   <div class="box2">
    <p><strong>豆瓣时间</strong></p>
    <img src="./images/豆瓣时间.jpg">
   </div>
   <div class="box3">
    <p><strong>豆瓣书店</strong></p>
    <img src="./images/豆瓣书店.jpg">
   </div>
   <div class="T">
    <img src="./images/龙.jpg">
    <img src="./images/S-4.jpg" >
   </div>

   <main>
   <div class="swiper s2">
       <div class="swiper-wrapper">
         <div class="swiper-slide">m**下单了山东特产商品...</div>
         <div class="swiper-slide">y**下单了江南精品脐橙...</div>
         <div class="swiper-slide">z**下单了比翼鸟特惠水...</div>
         <div class="swiper-slide">尼**下单了圣诞送人礼品...</div>
       </div>
     </div>

     <div class="T-1">
      <img src="./images/T-头.jpg">
     </div>
   <h2>豆下铺团购</h2>
   <h5>全部></h5>
     <!-- Swiper -->
 <div class="swiper s3">
   <div class="swiper-wrapper">
     <div class="swiper-slide"><img src="./images/T-1.jpg"></div>
     <div class="swiper-slide"><img src="./images/T-2.jpg"></div>
     <div class="swiper-slide"><img src="./images/T-3.jpg"></div>
     <div class="swiper-slide"><img src="./images/T-4.jpg"></div>
     <div class="swiper-slide"><img src="./images/T-5.jpg"></div>
     <div class="swiper-slide"><img src="./images/T-6.jpg"></div>
   </div>
 </div>
</main>
<nav class="bnav">
  <ul>
      <li>
          <div>
              <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye-tianchong"></use>
              </svg>
              <p>首页</p>
              <span class="dot"></span>
          </div>
          <li>
              <div>
                  <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-24gl-bookmarks2"></use>
                  </svg>
                  <p>书影音</p>
              </div>
          </li>
          <li>
              <div>
                  <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-hongwai"></use>
                  </svg>
                  <p>小组</p>
              </div>
          </li>
          <li>
              <div>
                  <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-shangpu-copy"></use>
                  </svg>
                  <p>市集</p>
              </div>
          </li>
          <li>
              <div>
                  <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-wode1"></use>
                  </svg>
                  <p>我</p>
              </div>
          </li>
      </li>
  </ul>
</nav>
 
 <script src="./swiper/swiper-bundle.min.js"></script>
     <!-- Swiper JS -->
     <script src="./swiper/swiper-bundle.min.js"></script>

 <!-- Initialize Swiper -->
 <script>
   var swiper2 = new Swiper(".s2", {
     direction: "vertical",
     autoplay: {/* 自动动态滚动 */
       delay: 2500,
       disableOnInteraction: false,
     },
   });

   var swiper3 = new Swiper(".s3", {
     slidesPerView: 3,/* 一个视图放几个幻灯片 */
     spaceBetween: 5,
   });
 </script>
  
</body>
</html>